 <template>
    <div>
      <!-- <div class="bgcontent">
        <el-button icon="el-icon-edit" class="bgIcon" @click="showCheck">默认按钮</el-button>
        <div class="content" v-show="check">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div> -->
      <div>
         <el-table
          :data="reset"
          border
          style="width: 99%">
          <el-table-column
            fixed
            prop="ActionID"
            align="center"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="ActionName"
            :show-overflow-tooltip="true"
            align="center"
            label="日志标题">
          </el-table-column>
          <el-table-column
            prop="RequestUri"
            align="center"
            :show-overflow-tooltip="true"
            label="请求地址">
          </el-table-column>
          <el-table-column
            prop="Paramaters"
            align="center"
            :show-overflow-tooltip="true"
            label="请求参数">
          </el-table-column>
          
          <el-table-column
            prop="UserHostName"
            align="center"
            label="请求ip"
            width="150">
          </el-table-column>
          <el-table-column
            prop="CreateTime"
            align="center"
            :show-overflow-tooltip="true"
            label="请求时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="CostTime"
            v-if="showPhone"
            label="请求耗时"
            :show-overflow-tooltip="true"
            width="150">
          </el-table-column>
          <el-table-column
            prop="LogTypeFormat"
            label="日志类型"
            align="center"
            width="100">
          </el-table-column>
          <el-table-column
            prop="ExecuteResult"
            
            label="请求结果">
            <template scope="scope">
              <span @click="lookphoto(scope.row)" style="cursor:pointer;color: #0095FF;">点击查看</span>
            </template>
          </el-table-column>
          <!-- v-if="showWX" -->
          <!-- <el-table-column
          :show-overflow-tooltip="true"
            prop="ExecuteResult"
            label="异常抛错信息">
          </el-table-column> -->
        </el-table>

        <el-dialog title="请求结果" center :visible.sync="dialogVisible" :close-on-click-modal='false' width="730px">
          <div><span>{{currentRow}}</span></div>
        </el-dialog>
      </div>
    </div>
  </template>

  <script>
   const cityOptions = ['日志标题', '产线工位', '性别'];
  // const cityOptions = []
    export default {
      props:{
        reset:{
          type:Array,
          required:true
        }
      },
      data() {
        return {
          check:false,   //点击显示 字段显示
          // duo选
        checkAll: false,
        checkedCities: [],   //默认显示
        cities: cityOptions,
        isIndeterminate: true,
        dialogVisible:false,
        currentRow:'',
        }
      },
      methods:{
        showCheck(){
          this.check=!this.check
        },
         handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        change(val){
          let listId=[]
          val.forEach(el => {
              listId.push(el.UserID)
          });
          this.$emit('getId',listId)
        },
        lookphoto(row){
          console.log(row);
          this.handleCurrentChange(row) ;
        },
        handleCurrentChange(row){
          this.dialogVisible = true
          this.currentRow = row.ExecuteResult;
          
        },
      },
      computed:{
        showPhone(){
          if(this.checkedCities.indexOf('手机')!==-1){
            return true
          }else{
            return false
          }
        },
        // showWX(){
        //   if(this.checkedCities.indexOf('日志类型')!==-1){
        //     return true
        //   }else{
        //     return false
        //   }
        // },
        showSex(){
          if(this.checkedCities.indexOf('性别')!==-1){
            return true
          }else{
            return false
          }
        }
      }
    }
  </script>

  <style lang="scss" scoped>
  .bgcontent{
    width:100%;
    height: 40px;
    position: relative;
    .content{
      position: absolute;
      right: 0;
      top: 40px;
      width:170px;
      height: 150px;
      background: #ffffff;
      border:1px solid #dcdfe6;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      z-index: 100;
      border-radius: 5px;
    }
    .bgIcon{
    position: absolute;
    right: 20px;
    top: 0px;
   }
  }
  .el-dialog{
    height: 500px;
    
    div{
      // width: 97%;
      height: 450px;
      overflow-x: hidden;
      span{
        display: inline-block;
        width:98%;
        word-wrap: break-word;
        word-break: normal;
      }
    }
  }
  </style>
  